/*
 * @Description: 左侧 - 社区标签/网站信息
 * @Date: 2021-03-11 09:18:29
 * @Author: 黄治恩
 */
import React, { Component } from 'react';
import { Link } from 'react-router-dom'
import { nanoid } from 'nanoid' 
import { Image } from 'antd'

import './style.scss'

interface topic_type{
  id:string,
  name:string,
  img?:string
}

interface us_type{
  id:string,
  img:string
}

class Topic extends Component {

  state = {
    topicList:[
      {
        id:nanoid(),
        name:'vue'
      },
      {
        id:nanoid(),
        name:'react'
      },
      {
        id:nanoid(),
        name:'前端'
      },
      {
        id:nanoid(),
        name:'前端'
      },
      {
        id:nanoid(),
        name:'前端'
      },
      {
        id:nanoid(),
        name:'前端'
      },
      {
        id:nanoid(),
        name:'前端'
      },
      {
        id:nanoid(),
        name:'前端'
      },
      {
        id:nanoid(),
        name:'前端'
      },
      {
        id:nanoid(),
        name:'前端'
      }
    ],
    usList:[
      {
        id:nanoid(),
        img:'https://www.unitimes.pro/_nuxt/img/1643227.svg'
      },
      {
        id:nanoid(),
        img:'https://www.unitimes.pro/_nuxt/img/09c59ef.svg'
      },
      {
        id:nanoid(),
        img:'https://www.unitimes.pro/_nuxt/img/2375945.svg'
      },
      {
        id:nanoid(),
        img:'https://www.unitimes.pro/_nuxt/img/d2a43ff.svg'
      }
    ]
  }

  onDetail = (item:topic_type)=>{
    console.log(item.id);
  }

  render() {
    const { topicList, usList } = this.state
    return (
      <aside className="index-tipic">
        <ul  className="list">
          {
            topicList.map( (item:topic_type) => (
              <li onClick={ () => this.onDetail(item) } key={item.id} className="item">
                <Image className="item-img" preview={false} width={24} src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
                <div className="item-name">
                  {item.name}
                </div>
              </li>
            ))
          }
        </ul>
        <div className="contact-us">
          <h4 className="us-title">联系我们</h4>
          <ul className="us-list">
            {
              usList.map( (item:us_type) => (
                <li key={item.id} className="us-item">
                  <Image preview={false} src={item.img} />
                </li>
              ))
            }
          </ul>
        </div>
        <div className="more-block">
          <p className="more-list">
            <Link to="/">服务条款</Link> · <Link to="/">隐私协议</Link>
          </p>
          <p className="more-list">
            <Link to="/">粤ICP备18076928号-1</Link>
          </p>
          <p className="more-list">
            ©2020 Unitimes
          </p>
        </div>
      </aside>
    );
  }
}

export default Topic;